<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            访客
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            新用户
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            销售额
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            成交量
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md8">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">源码地址</div>
                                <div class="layui-card-body">
                                    <p style="margin-bottom: 5px;">QQ交流群：248049395，616153456</p>
                                    <p style="margin-bottom: 5px;">源码下载:
                                        <a href='https://gitee.com/kitteam/kit_admin/' target="_blank">
                                            <img src='https://gitee.com/kitteam/kit_admin/badge/star.svg?theme=white' alt='star'></img>
                                        </a>
                                        (模板源码)
                                    </p>
                                    <p style="margin-bottom: 5px;">　脚手架:
                                        <a href='https://gitee.com/kitteam/kit_admin_scaffold/' target="_blank">
                                            <img src='https://gitee.com/kitteam/kit_admin_scaffold/badge/star.svg?theme=white' alt='star'></img>
                                        </a>
                                        (基于打包后的源码构建的脚手架)正式开发可以直接使用此模板
                                    </p>
                                    <p style="margin-bottom: 5px;">演示代码:
                                        <a href='https://gitee.com/kitteam/kit_admin_demo/' target="_blank">
                                            <img src='https://gitee.com/kitteam/kit_admin_demo/badge/star.svg?theme=white' alt='star'></img>
                                        </a>
                                        (基于脚手架构建的演示代码)
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-header">ECharts</div>
                                <div class="layui-card-body">
                                    <div id="container1" style="height:350px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-header">ECharts</div>
                                <div class="layui-card-body">
                                    <div id="main" style="height:350px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">ECharts</div>
                                <div class="layui-card-body">
                                    <div id="main1" style="height:350px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">数据统计</div>
                                <div class="layui-card-body">
                                    <table id="demo_hash" lay-filter="test_hash"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">快捷入口</div>
                                <div class="layui-card-body">
                                    <div class="layui-row layui-col-space5">
                                        <!-- <div class="layui-col-sm3">
                                              <div style="height:75px;  background-color:#ccc;"></div>
                                            </div>
                                            <div class="layui-col-sm3">
                                              <div style="height:75px;  background-color:#ccc;"></div>
                                            </div>
                                            <div class="layui-col-sm3">
                                              <div style="height:75px;  background-color:#ccc;"></div>
                                            </div>
                                            <div class="layui-col-sm3">
                                              <div style="height:75px;  background-color:#ccc;"></div>
                                            </div>
                                            <div class="layui-col-sm3">
                                              <div style="height:75px;  background-color:#ccc;"></div>
                                            </div>
                                            <div class="layui-col-sm3">
                                              <div style="height:75px;  background-color:#ccc;"></div>
                                            </div>
                                            <div class="layui-col-sm3">
                                              <div style="height:75px;  background-color:#ccc;"></div>
                                            </div>
                                            <div class="layui-col-sm3">
                                              <div style="height:75px;  background-color:#ccc;"></div>
                                            </div> -->
                                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                                            <div style="height:75px;  background-color:#ccc;"></div>
                                        </div>
                                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                                            <div style="height:75px;  background-color:#ccc;"></div>
                                        </div>
                                        <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
                                            <div style="height:75px;  background-color:#ccc;"></div>
                                        </div>
                                        <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
                                            <div style="height:75px;  background-color:#ccc;"></div>
                                        </div>
                                        <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
                                            <div style="height:75px;  background-color:#ccc;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">版本信息</div>
                                <div class="layui-card-body">
                                    <table class="layui-table">
                                        <colgroup>
                                            <col width="150">
                                            <col>
                                        </colgroup>
                                        <tbody>
                                        <tr>
                                            <td>版本号</td>
                                            <td>v2.0.0-beta1</td>
                                        </tr>
                                        <tr>
                                            <td>依赖</td>
                                            <td>layui v2.2.5</td>
                                        </tr>
                                        <tr>
                                            <td>作者</td>
                                            <td>Van Zheng</td>
                                        </tr>
                                        <tr>
                                            <td>邮箱</td>
                                            <td>zheng_jinfan@126.com</td>
                                        </tr>
                                        <tr>
                                            <td>交流群</td>
                                            <td>248049395</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">关于KITADMIN 2.0</div>
                                <div class="layui-card-body">
                                    <p>当前版本是基于layui 2.x重构的版本，与之后1.x版本有本质有区别。</p>
                                    <p>该版本的核心是[路由]，不再支持[iframe]方式的加载</p>
                                    <p>版本特性：</p>
                                    <ul>
                                        <li>1、用法一如既往的简单，快捷。(只需要简单的配置就实现一些功能).</li>
                                        <li>2、提供本地开发环境。(依赖nodejs运行环境和gulp)</li>
                                        <li>3、提供代码功能。(依赖nodejs运行环境和gulp)</li>
                                        <li>4、模块化加载。(依赖layui模块化，用法与layui保持一致)</li>
                                        <li>5、提供路由功能。(路由是本版本的核心功能了，需与模板绑定，详情请参考相关文档)</li>
                                        <li>6、完全的前后端分离开发。(集成mockjs用于拦截请求并返回模拟数据，详情请参考相关文档)</li>
                                        <li>7、左侧菜单重写，支持到4级菜单。(集成mockjs用于拦截请求并返回模拟数据，详情请参考相关文档)</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
<script>
    layui.config({
        base: '/src/js/'
    }).use(['jquery', 'mockjs', 'table'], function() {
        var $ = layui.jquery,
            layer = layui.layer,
            table = layui.table;

        var intervalIndex = setInterval(function() {
            if (echarts === undefined) {
                return;
            }
            // 如果eacharts加载完成，则清除循环
            clearInterval(intervalIndex);
            //echarts
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            // echarts 1
            var myChart1 = echarts.init(document.getElementById("container1"));
            var app1 = {};
            option1 = null;
            app1.title = '极坐标系下的堆叠柱状图';

            option1 = {
                title: {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [{
                        value: 335,
                        name: '直接访问'
                    }, {
                        value: 310,
                        name: '邮件营销'
                    }, {
                        value: 234,
                        name: '联盟广告'
                    }, {
                        value: 135,
                        name: '视频广告'
                    }, {
                        value: 1548,
                        name: '搜索引擎'
                    }],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            if (option1 && typeof option1 === "object") {
                myChart1.setOption(option1, true);
            }

            // echart2
            var myChart2 = echarts.init(document.getElementById("main1"));
            var app2 = {};
            option2 = null;
            option2 = {
                title: {
                    text: '堆叠区域图'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {
                        normal: {}
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                }, {
                    name: '联盟广告',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {
                        normal: {}
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                }, {
                    name: '视频广告',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {
                        normal: {}
                    },
                    data: [150, 232, 201, 154, 190, 330, 410]
                }, {
                    name: '直接访问',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {
                        normal: {}
                    },
                    data: [320, 332, 301, 334, 390, 330, 320]
                }, {
                    name: '搜索引擎',
                    type: 'line',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {
                        normal: {}
                    },
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }]
            };;
            if (option2 && typeof option2 === "object") {
                myChart2.setOption(option2, true);
            }

            $(window).on('resize', function() {
                myChart.resize();
                myChart1.resize();
                myChart2.resize();
            });
        }, 50);

        // 注入mock
        layui.mockjs.inject({
            'POST /demo/table/user': {
                code: 0,
                msg: "xxx",
                count: 1000,
                'data|20': [{
                    'id|+1': 1,
                    username: '@name',
                    sex: '@boolean',
                    city: '@city',
                    sign: '@csentence',
                    experience: '@integer',
                    score: '@integer',
                    classify: '@word',
                    wealth: '@integer',
                    auth: '@boolean'
                }]
            }
        });
        //第一个实例
        table.render({
            method: 'post',
            done: function() {
                $('#demo_hash').next().css('height', 'auto');
            },
            limit: 20,
            elem: '#demo_hash',
            height: 420,
            url: '/demo/table/user', //数据接口
            page: true, //开启分页
            cols: [
                [ //表头
                    {
                        field: 'id',
                        title: 'ID',
                        width: 50,
                        fixed: 'left'
                    }, {
                    field: 'username',
                    title: '用户名',
                    width: 80
                }, {
                    field: 'sex',
                    title: '性别',
                    width: 80,
                    sort: true
                }, {
                    field: 'city',
                    title: '城市',
                    width: 80
                }, {
                    field: 'sign',
                    title: '签名',
                    width: 177
                }, {
                    field: 'experience',
                    title: '积分',
                    width: 80,
                    sort: true
                }, {
                    field: 'score',
                    title: '评分',
                    width: 80,
                    sort: true
                }, {
                    field: 'classify',
                    title: '职业',
                    width: 80
                }, {
                    field: 'wealth',
                    title: '财富',
                    width: 135,
                    sort: true
                }
                ]
            ]
        });
    });
</script>
<style scoped>

</style>